ul li {
  list-style: none;  
}

#box {
  width:600px;
  height:600px;
  /* border:1px solid red; */
}

#flat {
  position:relative;
  width:400px;
  height:200px;
  left:50%;
  top:50%;
  margin-left: -200px;
  margin-top:-100px;
  /* background-color: grey;
  border:1px solid green; */
  transform-style: preserve-3d;
  perspective: 2000px;
  
}

input {
  position: fixed;
  left:50%;
  margin-left:-40px;
}

li {
  border:1px solid purple;
  position: absolute;
  left:50%;
  top:50%;
  text-align: center;
  line-height: 200px;
}

li:nth-child(-n+4) {
  width: 400px;
  height:200px;
  margin-left:-200px;
  margin-top:-100px;
  
}

  li:nth-child(1)
{
  
  transform: translateZ(100px);
}

li:nth-child(2)
{
  
  transform: rotateX(90deg) translateZ(100px);
}

li:nth-child(3)
{
 
  transform: rotateX(180deg) translateZ(100px);
}

li:nth-child(4)
{
 
  transform: rotateX(270deg) translateZ(100px);
}  
li:nth-child(5)
{
  width:200px;
  height:200px;
  margin-left:-100px;
  margin-top:-100px;
  transform: rotateY(-90deg) translateZ(200px);
}

li:nth-child(6)
{
  width:200px;
  height:200px;
  margin-left:-100px;
  margin-top:-100px;
  transform: rotateY(90deg) translateZ(200px);
  
}